<?php
$entity = $vars['entity'];
$prizes = $entity->getPrizes();
?>

<style>
th
{
	font-weight: bold;
}
tr.prize-row
{
	
}
tr.prize-row input, textarea
{
	margin: 0;
	border: 0;
	display: block;
	width: 200px;
	background: transparent;
}
tr.prize-row-edit
{
	
}
tr.prize-row-edit td
{
	background: #D8DFEA;
}
tr#prize-row-template
{
	display:none;
}
</style>
<script type="text/javascript">
function addPrize()
{
	//Get the template
	var row = $('#prize-row-template').clone(true);
	
	$(row).removeAttr('id');
	$(row).appendTo('.elgg-table > tbody');
	$(row).children('td').children('input:first').focus();
}
</script>
<div id="prizes-info" class="form-section-body" style="display:none;">
	<div class="elgg-module elgg-module-featured">
		<div class="elgg-head">
			<h3>Informacion sobre esta seccion</h3>
		</div>
		<div class="elgg-body" style="display:none;">
			<ul>
				<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
				<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
			</ul>
		</div>
	</div>
	
	<a href="javascript:addPrize();" class="elgg-button elgg-button-special">Agregar premio</a><br><br>
	
	<table class="elgg-table">
		<thead>
			<tr>
				<th>Condición/Puesto</th>
				<th>Descripción</th>
				<th width="120">&nbsp;</th>
			</tr>
		</thead>
		<tbody>
			
			<?php foreach($prizes as $prize): ?>
			<tr id="prize-row" class="prize-row">
				<td><input type="text" name="prize-condition[]" value="<?php echo $prize['condition']; ?>"></td>
				<td><input type="text" name="prize-description[]" value="<?php echo $prize['description']; ?>"></td>
				<td>
					<button type="button" class="elgg-button elgg-button-action">Editar</button>
					<button type="button" class="elgg-button elgg-button-delete">Borrar</button>
				</td>
			</tr>
			<?php endforeach; ?>
			
			<tr id="prize-row-template" class="prize-row-edit">
				<td><input type="text" name="prize-condition[]" ></td>
				<td><input type="text" name="prize-description[]" ></td>
				<td>
					<button type="button" class="elgg-button elgg-button-action">Guardar</button>
					<button type="button" class="elgg-button elgg-button-delete">Borrar</button>
				</td>
			</tr>
		</tbody>
	</table>
	
	<div class="buttons" style="padding-top: 10px;">
		<a style="float:left" href="#timetable-info" class="elgg-button">Atras</a>
		<a style="float:right" href="#categories-info" class="elgg-button">Siguiente</a>
	</div>
</div>
<script type="text/javascript">
//Edit & Save button
$('.elgg-button-action').click(function()
{
	var parent = $(this).parent().parent();
	var inputs = $(parent).children('td').children('input');
	
	if($(parent).hasClass('prize-row'))
	{
		$(parent).removeClass('prize-row');
		$(parent).addClass('prize-row-edit');
		
		$(inputs).removeAttr('readonly');
		$(inputs).first().focus();
		
		$(this).html('Guardar');
	}
	else
	{
		$(parent).removeClass('prize-row-edit');
		$(parent).addClass('prize-row');
		
		$(inputs).attr('readonly', 'true');
		
		$(this).html('Editar');
	}
});

//Delete button
$('.elgg-button-delete').click(function()
{
	$(this).parent().parent().remove();
});
</script>